<template>
    <div>

        <el-form label-width="30"
                 ref="conditions" :model="queryCondition" :rules="rules">
            <el-row gutter="20">
                <el-col :span="6">
                    <el-form-item prop="similarNickName">
                        <el-input v-model.trim="queryCondition.similarNickName">
                            <template slot="prepend"><span>卖家昵称</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="articleCode">
                        <el-input v-model="queryCondition.articleCode">
                            <template slot="prepend"><span>流水号</span></template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row gutter="20">
                <el-col :span="6">
                    <el-form-item prop="minPrice">
                        <el-input v-model="queryCondition.minPrice">
                            <template slot="prepend">最小值</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="maxPrice">
                        <el-input v-model="queryCondition.maxPrice">
                            <template slot="prepend">最大值</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row gutter="20">
                <el-col :span="6">
                    <el-form-item prop="sellerCode">
                        <el-input v-model="queryCondition.sellerCode">
                            <template slot="prepend">所属卖家流水号</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="articleType">
                        <el-radio-group v-model="queryCondition.articleType">
                            <el-radio v-for="i in articleTypes" :key="i.value"
                                    :label="i.value" >{{i.text}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="queryArticles(1)">查询
                </el-button>
                <!--<el-button type="warning" icon="el-icon-remove"
                           @click="()=> {$ref['conditions'].resetFields()}">重置0
                           不能这样写,似乎此时ref还没有保证加载
                </el-button>-->
                <el-button type="warning" icon="el-icon-remove"
                           @click="resetForm">重置
                </el-button>

            </el-form-item>
        </el-form>
        <!-- row
        {
      "id": 11,
      "articleCode": "Ar_942045",
      "articleType": "food",
      "price": 64,
      "seller": {
        "id": 9,
        "sellerCode": "Seller_106358",
        "member": {
          "balance": 333.1,
          "nickName": "赵_1"
        },
        "createDate": "2018-10-29"
      }
    }-->
         <el-table :data="results"
                   :stripe="true">
                    <el-table-column prop="articleCode" label="商品流水号"></el-table-column>
                    <el-table-column prop="articleType" label="商品类型"></el-table-column>
                    <el-table-column label="商品类型U">
                        <span slot-scope="props">
                            {{articleTypes.find(x=>x.value===props.row.articleType).text}}
                        </span>
                    </el-table-column>
                    <el-table-column prop="price" label="商品价格"></el-table-column>
                    <el-table-column prop="seller.sellerCode" label="卖家流水号"></el-table-column>
                    <el-table-column prop="seller.member.nickName" label="卖家昵称"></el-table-column>
                    <el-table-column prop="seller.member.balance" label="卖家余额"></el-table-column>
                    <el-table-column label="操作" width="300" fixed="left">
                        <template slot-scope="props">
                            <el-button-group>
                                <el-button type="primary" icon="el-icon-edit"
                                           @click="edit(props.row)">编辑
                                </el-button>
                                <el-button type="warning" icon="el-icon-delete"
                                           @click="remove(props.row)">删除
                                </el-button>
                                <el-button type="danger" icon="el-icon-check"
                                           @click="add(props.row)">新增
                                </el-button>
                            </el-button-group>
                        </template>
                    </el-table-column>
        </el-table>
               <div class="el-pagination">

                    <el-pagination layout="total, prev, pager, next, jumper"
                                   :total="total" :current-page="queryCondition.pageNum"
                                   :page-size="queryCondition.pageSize"
                                   @current-change="queryArticles">

                    </el-pagination>
                </div>
        <el-dialog :visible.sync="modifyWindow">
            <article-desc ref="modify" :mode="1"></article-desc>
            <el-button-group slot="footer">
                <el-button type="primary" icon="el-icon-check"
                           @click="modifySubmit">提交
                </el-button>
                <el-button type="primary" icon="el-icon-edit"
                           @click="()=>modifyWindow=false">取消
                </el-button>
            </el-button-group>
        </el-dialog>
        <el-dialog :visible.sync="insertWindow">
            <article-desc ref="insert" :mode="0"></article-desc>
            <el-button-group slot="footer">
                <el-button type="primary" icon="el-icon-check"
                           @click="addSubmit">保存
                </el-button>
                <el-button type="primary" icon="el-icon-edit"
                           @click="()=>insertWindow=false">取消
                </el-button>
            </el-button-group>
        </el-dialog>
    </div>
</template>

<script>
    import a from '../components/ArticleDesc'
    import {mapState, mapActions} from 'vuex'
    export default {
        components:{
            ArticleDesc:a,
        },
        data: function () {
            return {
                queryCondition: {
                    sellerCode: '',
                    similarSellerName: '',
                    articleCode: '',
                    articleType: null,
                    maxPrice: null,
                    minPrice: null,
                    pageNum: 1,
                    pageSize: 3,
                },
                results:[],
                total:0,
                modifyWindow:false,
                insertWindow:false,
            }
        },
        computed: {
            ...mapState([
                'articleTypes'
            ])

        },
        methods: {
            queryArticles:function (pageNum) {
                if (pageNum) this.queryCondition.pageNum=pageNum;
                let url = 'http://localhost:8899/articles';
                this.$http({
                    url:url,
                    method:'post',
                    data:this.queryCondition,
                }).then(res =>{
                  //  this.$message.warning(JSON.stringify(res.data));
                    this.results = res.data.results;
                    this.total=res.data.total;
                }).catch(this.$message.warning(JSON.stringify));

            },
            resetForm: function () {
                this.$refs['conditions'].resetFields();
            },
            ...mapActions([
                'initArticleTypes',
            ]),
            edit:function (entity) {
                this.modifyWindow=true;
                this.$nextTick(()=>this.$refs['modify'].modifyInit(entity.articleCode));
            },
            remove:function (entity) {

            },
            add:function (entity) {
                this.insertWindow=true;
                this.$nextTick(()=> this.$refs['insert'].insertInit(entity.seller.sellerCode));
            },

            modifySubmit:function () {
                let url = 'http://localhost:8899/article';
                this.$refs['modify']
                    .save(url,'post')
                    .then(entity=>{
                        this.$message.warning(JSON.stringify(entity)+'已经保存');
                        this.modifyWindow=false;
                        this.queryArticles(1);
                        return 0;
                    });
            },
            addSubmit:function () {
                let url='http://localhost:8899/article';
                this.$refs['insert']
                    .save(url,'put')
                    .then( entity =>{
                        this.$message.warning(JSON.stringify(entity));
                        this.insertWindow=false;
                        this.queryCondition.sellerCode=entity.seller.sellerCode;
                        this.queryArticles(1);
                        return 0;
                })
            }

        },

        mounted: function () {

            this.queryArticles(1);

        },

        created: function () {
            this.initArticleTypes();
        },
        name: "Article"
    }
</script>

<style scoped>

</style>
